<template>
    <div id="app">
        <!-- 基础使用 -->
        <GradientBackground v-if="currentDemo === 'basic'">
            <div class="card">
                <h1>渐变色光斑特效</h1>
                <p>这是一个基于Vue3的渐变色光斑背景组件</p>
                <button @click="switchDemo" class="demo-btn">
                    切换到自定义颜色
                </button>
            </div>
        </GradientBackground>

        <!-- 自定义颜色 -->
        <GradientBackground v-if="currentDemo === 'custom'" :colors="customColors" :circle-size="'100%'"
            :blend-mode="'screen'" :blur-intensity="60">
            <div class="card">
                <h1>自定义配置</h1>
                <p>自定义颜色、大小和混合模式</p>
                <button @click="switchDemo" class="demo-btn">
                    切换到禁用交互
                </button>
            </div>
        </GradientBackground>

        <!-- 禁用交互 -->
        <GradientBackground v-if="currentDemo === 'static'" :enable-interactive="false" :colors="staticColors">
            <div class="card">
                <h1>静态背景</h1>
                <p>禁用鼠标交互的静态版本</p>
                <button @click="switchDemo" class="demo-btn">
                    切换到编程控制
                </button>
            </div>
        </GradientBackground>

        <!-- 编程控制 -->
        <GradientBackground v-if="currentDemo === 'programmatic'" ref="bgRef" :colors="programmaticColors">
            <div class="card">
                <h1>编程控制</h1>
                <p>通过代码控制交互元素位置</p>
                <div class="controls">
                    <button @click="moveToCenter" class="demo-btn">
                        移到中心
                    </button>
                    <button @click="moveToCorners" class="demo-btn">
                        移到角落
                    </button>
                    <button @click="startAutoMove" class="demo-btn">
                        自动移动
                    </button>
                    <button @click="stopAutoMove" class="demo-btn">
                        停止移动
                    </button>
                </div>
                <button @click="switchDemo" class="demo-btn">
                    返回基础版本
                </button>
            </div>
        </GradientBackground>

        <!-- 控制面板 -->
        <div class="control-panel">
            <h3>当前演示: {{ demoNames[currentDemo] }}</h3>
            <div class="demo-selector">
                <button v-for="(name, key) in demoNames" :key="key" @click="currentDemo = key"
                    :class="{ active: currentDemo === key }" class="selector-btn">
                    {{ name }}
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import GradientBackground from '@/components/background/GradientBackground.vue'

// 当前演示模式
const currentDemo = ref('basic')
const bgRef = ref(null)
const autoMoveInterval = ref(null)

// 演示名称
const demoNames = {
    basic: '基础版本',
    custom: '自定义颜色',
    static: '静态背景',
    programmatic: '编程控制'
}

// 自定义颜色配置
const customColors = {
    bg1: 'rgb(20, 5, 30)',
    bg2: 'rgb(40, 10, 60)',
    color1: '255, 100, 150',
    color2: '150, 255, 100',
    color3: '100, 150, 255',
    color4: '255, 200, 100',
    color5: '200, 100, 255',
    interactive: '255, 150, 200'
}

// 静态背景颜色
const staticColors = {
    bg1: 'rgb(15, 25, 35)',
    bg2: 'rgb(25, 35, 45)',
    color1: '70, 130, 180',
    color2: '100, 149, 237',
    color3: '135, 206, 235',
    color4: '176, 224, 230',
    color5: '95, 158, 160',
    interactive: '72, 61, 139'
}

// 编程控制颜色
const programmaticColors = {
    bg1: 'rgb(10, 20, 30)',
    bg2: 'rgb(30, 40, 50)',
    color1: '255, 69, 0',
    color2: '255, 140, 0',
    color3: '255, 215, 0',
    color4: '50, 205, 50',
    color5: '0, 191, 255',
    interactive: '255, 105, 180'
}

// 切换演示
const switchDemo = () => {
    const demos = Object.keys(demoNames)
    const currentIndex = demos.indexOf(currentDemo.value)
    const nextIndex = (currentIndex + 1) % demos.length
    currentDemo.value = demos[nextIndex]
}

// 编程控制方法
const moveToCenter = () => {
    if (bgRef.value) {
        bgRef.value.updateTarget(window.innerWidth / 2, window.innerHeight / 2)
    }
}

const moveToCorners = () => {
    if (bgRef.value) {
        const corners = [
            [100, 100],
            [window.innerWidth - 100, 100],
            [window.innerWidth - 100, window.innerHeight - 100],
            [100, window.innerHeight - 100]
        ]
        const randomCorner = corners[Math.floor(Math.random() * corners.length)]
        bgRef.value.updateTarget(randomCorner[0], randomCorner[1])
    }
}

const startAutoMove = () => {
    stopAutoMove()
    autoMoveInterval.value = setInterval(() => {
        if (bgRef.value) {
            const x = Math.random() * window.innerWidth
            const y = Math.random() * window.innerHeight
            bgRef.value.updateTarget(x, y)
        }
    }, 2000)
}

const stopAutoMove = () => {
    if (autoMoveInterval.value) {
        clearInterval(autoMoveInterval.value)
        autoMoveInterval.value = null
    }
}

// 清理定时器
onUnmounted(() => {
    stopAutoMove()
})
</script>

<style scoped>
#app {
    font-family: 'Montserrat', sans-serif;
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.card {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 600px;
    padding: 48px;
    backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: 0 4px 90px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    text-align: center;
    user-select: none;
}

.card::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            white 34%,
            white 89%,
            rgba(255, 255, 255, 0) 100%);
    opacity: 0.3;
    filter: blur(0.5px);
    mix-blend-mode: hard-light;
}

.card h1 {
    font-size: 3rem;
    margin-bottom: 16px;
    font-weight: 700;
    text-shadow: -3px 0px 2px rgba(0, 0, 0, 0.1);
}

.card p {
    line-height: 1.6;
    margin-bottom: 24px;
    font-size: 1.1rem;
}

.demo-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    margin: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.demo-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
}

.control-panel {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 16px;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.control-panel h3 {
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.demo-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.selector-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.selector-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.selector-btn.active {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .card {
        max-width: 90%;
        padding: 32px 24px;
    }

    .card h1 {
        font-size: 2rem;
    }

    .control-panel {
        position: relative;
        margin: 20px;
        top: auto;
        left: auto;
    }

    .demo-selector {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .card h1 {
        font-size: 1.5rem;
    }

    .card p {
        font-size: 1rem;
    }

    .controls {
        flex-direction: column;
        align-items: center;
    }

    .demo-btn {
        width: 200px;
    }
}
</style>